<div class="chat-wrap" [class.show]="show">
  <nz-card [nzActions]="[inputTpl]" [nzTitle]="titleTemplate"
           [nzBodyStyle]="{padding:0}" [nzExtra]="extraTemplate">
    <div #scrollMe class="flex chart-content">
      <span class="text-center sp-12 m-b-5" nz-typography nzType="secondary">2021-7-27</span>
      <div nz-row>
        <nz-avatar class="m-r-8" nz-col nzFlex="30px" nzIcon="user" nzSrc="../../../../assets/imgs/logo.svg"></nz-avatar>
        <div class="m-t-0 p-8" nz-result-content nz-col nzFlex="1">
          请 <span nz-typography nzType="danger">一句话</span>描述您的问题，我们来帮您解决。😎
        </div>
        <div nz-col nzFlex="30px"></div>
      </div>
      <div nz-row class="m-t-20" *ngFor="let item of userSubmitArray;let last = last;">
        <div nz-col nzFlex="30px"></div>
        <!--有未读的样式-->
        <div nz-col nzFlex="1" style="display: flex;flex-direction: column;">
          <div class="m-t-0 p-8 text-break" nz-result-content>
            <span nz-typography>{{item}}</span>{{last ? scrollToBottom() : ''}}
          </div>
          <span class="sp-12 text-right m-t-5"  nz-typography nzType="secondary">未读</span>
        </div>

        <!--没有未读的样式-->
       <!-- <div class="m-t-0 p-8 text-break" nz-result-content nz-col nzFlex="1">
          <span nz-typography>{{item}}</span>{{last ? scrollToBottom() : ''}}
        </div>-->

        <div nz-col nzFlex="8px"></div>
        <nz-avatar nz-col nzFlex="30px" nzIcon="user"
                   nzSrc="../../../../assets/imgs/default_face.png"></nz-avatar>
      </div>
    </div>


  </nz-card>
  <ng-template #extraTemplate>
    <i *ngIf="!show" class="hand-model" (click)="show = !show;" nz-icon nzType="arrows-alt" nzTheme="outline"></i>
    <i *ngIf="show" (click)="show = !show;" class="hand-model" nz-icon nzType="shrink" nzTheme="outline"></i>
    <i class="hand-model m-l-8" (click)="close()" nz-icon nzType="close" nzTheme="outline"></i>
  </ng-template>
  <ng-template #titleTemplate>
    <span class="sp-14">联系管理员</span>
  </ng-template>
  <ng-template #inputTpl>
    <form [formGroup]="validateForm">
   <textarea #msgInput formControlName="question" (keydown.enter)="sendMessage(msgInput.value,$event);" style="resize:none"
             name="question" [nzBorderless]="true" rows="4" nz-input
             id="remark"
             placeholder="反馈些什么"></textarea>
    </form>
  </ng-template>
</div>

